<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今天吃什么 - 个人设置</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
    }
  </style>
</head>
<body class="pb-16">
  <!-- 引入组件模板 -->
  <iframe src="components.html" class="hidden" id="components-frame"></iframe>
  
  <!-- 顶部导航栏 -->
  <div class="bg-white shadow-md px-4 py-3 flex items-center justify-between sticky top-0 z-10">
    <h1 class="text-lg font-medium text-gray-800">个人设置</h1>
    <div>
      <button class="text-gray-600 px-2">
        <i class="fas fa-cog"></i>
      </button>
    </div>
  </div>
  
  <!-- 用户信息 -->
  <div class="bg-white p-4">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="用户头像" class="w-16 h-16 rounded-full object-cover">
      <div class="ml-4">
        <h2 class="font-medium">张小明</h2>
        <p class="text-sm text-gray-500 mt-1">上班族美食爱好者</p>
      </div>
      <button class="ml-auto text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- 用户数据 -->
  <div class="bg-white mt-2 p-4">
    <div class="grid grid-cols-4 gap-4 text-center">
      <div>
        <div class="font-medium">28</div>
        <div class="text-xs text-gray-500 mt-1">收藏</div>
      </div>
      <div>
        <div class="font-medium">156</div>
        <div class="text-xs text-gray-500 mt-1">浏览</div>
      </div>
      <div>
        <div class="font-medium">42</div>
        <div class="text-xs text-gray-500 mt-1">评价</div>
      </div>
      <div>
        <div class="font-medium">8</div>
        <div class="text-xs text-gray-500 mt-1">常去</div>
      </div>
    </div>
  </div>
  
  <!-- 饮食偏好 -->
  <div class="bg-white mt-2 p-4">
    <div class="flex justify-between items-center mb-3">
      <h3 class="font-medium">我的饮食偏好</h3>
      <button class="text-sm text-orange-500">编辑</button>
    </div>
    <div class="flex flex-wrap">
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">香辣</span>
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">中餐</span>
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">面食</span>
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">快餐</span>
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">不吃香菜</span>
      <span class="bg-orange-100 text-orange-600 text-xs px-3 py-1 rounded-full mr-2 mb-2">少油</span>
    </div>
  </div>
  
  <!-- 常用功能 -->
  <div class="bg-white mt-2">
    <div class="p-4 pb-2">
      <h3 class="font-medium">常用功能</h3>
    </div>
    
    <div class="grid grid-cols-4 p-2 text-center">
      <div class="p-2">
        <div class="w-12 h-12 mx-auto rounded-full bg-red-100 flex items-center justify-center mb-1">
          <i class="fas fa-history text-red-500"></i>
        </div>
        <span class="text-xs">历史记录</span>
      </div>
      <div class="p-2">
        <div class="w-12 h-12 mx-auto rounded-full bg-blue-100 flex items-center justify-center mb-1">
          <i class="fas fa-map-marked-alt text-blue-500"></i>
        </div>
        <span class="text-xs">常去地点</span>
      </div>
      <div class="p-2">
        <div class="w-12 h-12 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-1">
          <i class="fas fa-comment-alt text-green-500"></i>
        </div>
        <span class="text-xs">我的评价</span>
      </div>
      <div class="p-2">
        <div class="w-12 h-12 mx-auto rounded-full bg-purple-100 flex items-center justify-center mb-1">
          <i class="fas fa-ticket-alt text-purple-500"></i>
        </div>
        <span class="text-xs">优惠券</span>
      </div>
    </div>
  </div>
  
  <!-- 设置列表 -->
  <div class="bg-white mt-2">
    <ul class="divide-y divide-gray-100">
      <li class="flex items-center justify-between p-4">
        <div class="flex items-center">
          <i class="fas fa-bell text-gray-400 w-5"></i>
          <span class="ml-3">通知设置</span>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </li>
      <li class="flex items-center justify-between p-4">
        <div class="flex items-center">
          <i class="fas fa-map-marker-alt text-gray-400 w-5"></i>
          <span class="ml-3">位置管理</span>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </li>
      <li class="flex items-center justify-between p-4">
        <div class="flex items-center">
          <i class="fas fa-shield-alt text-gray-400 w-5"></i>
          <span class="ml-3">隐私设置</span>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </li>
      <li class="flex items-center justify-between p-4">
        <div class="flex items-center">
          <i class="fas fa-question-circle text-gray-400 w-5"></i>
          <span class="ml-3">帮助与反馈</span>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </li>
      <li class="flex items-center justify-between p-4">
        <div class="flex items-center">
          <i class="fas fa-info-circle text-gray-400 w-5"></i>
          <span class="ml-3">关于我们</span>
        </div>
        <i class="fas fa-chevron-right text-gray-300"></i>
      </li>
    </ul>
  </div>
  
  <!-- 退出登录 -->
  <div class="p-4">
    <button class="w-full py-3 text-gray-500 border border-gray-300 rounded-lg">
      退出登录
    </button>
  </div>
  
  <!-- 底部导航栏 -->
  <div id="bottom-nav"></div>
  
  <script>
    // 等待组件iframe加载完成
    document.getElementById('components-frame').onload = function() {
      const componentsDoc = document.getElementById('components-frame').contentDocument;
      
      // 插入底部导航
      const bottomNavTemplate = componentsDoc.getElementById('bottom-nav-template');
      document.getElementById('bottom-nav').innerHTML = bottomNavTemplate.innerHTML;
      
      // 设置当前页面导航项为活跃状态
      const profileLink = document.querySelector('#bottom-nav a[href="profile.html"]');
      const profileIcon = profileLink.querySelector('i');
      const profileText = profileLink.querySelector('span');
      profileIcon.classList.replace('text-gray-400', 'text-orange-500');
      profileText.classList.replace('text-gray-600', 'text-orange-500');
    };
  </script>
</body>
</html> 